<template>
  <div id="basicLayout">
    <a-layout style="min-height: 100vh">
      <a-layout-header class="header">
        <GlobalHeader />
      </a-layout-header>
      <a-layout>
        <a-layout-sider>
          <a-menu
            :style="{ width: '200px', height: '100%' }"
            :default-open-keys="['0']"
            :default-selected-keys="['0_0']"
            show-collapse-button
            breakpoint="xl"
            @collapse="onCollapse"
          >
            <a-sub-menu key="0">
              <template #icon>
                <icon-apps></icon-apps>
              </template>
              <template #title>主界面</template>
              <a-menu-item key="0_0">
                <router-link to="/questions">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>浏览题目</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="0_1">
                <router-link to="/question_submit">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>浏览题目作答提交</span>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="1">
              <template #icon>
                <icon-bug></icon-bug>
              </template>
              <template #title>我的题目与作答</template>
              <a-menu-item key="1_0">
                <router-link to="/my/questions">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>我的题目</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="1_1">
                <router-link to="/my/question_submit">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>我的作答</span>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="2">
              <template #icon>
                <icon-bulb></icon-bulb>
              </template>
              <template #title>用户中心</template>
              <a-menu-item key="2_0">
                <router-link to="/my/info">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>个人信息</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="2_1">
                <router-link to="/user/register">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>用户注册</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="2_1">
                <router-link to="/user/login">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>更换用户</span>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="3">
              <template #icon>
                <icon-bug></icon-bug>
              </template>
              <template #title>配置管理</template>
              <a-menu-item key="3_0">
                <router-link to="/no_implement">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>主题配置</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="3_1">
                <router-link to="/no_implement">
                  <template #icon>
                    <icon-dashboard />
                  </template>
                  <span>开关配置</span>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <router-view />
        </a-layout-content>
      </a-layout>
      <a-layout-footer class="footer">
        <a href="http://localhost:8121/api/doc.html#/home" target="_blank">
          后端接口调试swagger： http://localhost:8121/api/doc.html#/home
        </a>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>
#basicLayout {
  box-sizing: border-box;
  width: 100%;
  height: 600px;
}

#basicLayout .header {
  margin-bottom: 16px;
  box-shadow: #eee 1px 1px 5px;
}

#basicLayout .content {
  background: linear-gradient(to right, #fefefe, #fff);
  margin-bottom: 16px;
  padding: 20px;
}

#basicLayout .footer {
  background: #efefef;
  padding: 16px;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
</style>
<script>
import GlobalHeader from "@/components/GlobalHeader";
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { IconApps, IconBug, IconBulb } from "@arco-design/web-vue/es/icon";

export default {
  components: {
    GlobalHeader,
    IconApps,
    IconBug,
    IconBulb,
  },
  setup() {
    return {
      onCollapse(val, type) {
        const content =
          type === "responsive" ? "触发响应式收缩" : "点击触发收缩";
        Message.info({
          content,
          duration: 2000,
        });
      },
    };
  },
};
</script>
